@import 'variables';

#app.dark .theme--dark.v-chip,
#app.dark .v-chip {
    color: var(--v-textDark-base);

    i {
        color: var(--v-textDark-base);
    }
}

#app.dark kbd {
    background-color: var(--v-primary-base);
    color: var(--v-textDark-base);
}

// input text color
#app.dark input,
#app.dark textarea {
    color: var(--v-text-base) !important;
}

// input placeholder color
#app.dark input::placeholder,
#app.dark textarea::placeholder {
    color: var(--v-text-base) !important;
    -webkit-text-fill-color: var(--v-text-base) !important;
    opacity: .5 !important;
}

.v-text-field.v-input--has-state .v-input__control>.v-text-field__details>.v-counter, .v-text-field.v-input--is-disabled .v-input__control>.v-text-field__details>.v-counter, .v-text-field.v-input--is-disabled .v-input__control>.v-text-field__details>.v-messages, .v-text-field .v-input__control, .v-text-field fieldset

// text area
#app.dark textarea {
    color: var(--v-text-base);
}

// select text color
#app.dark .theme--dark.v-select .v-select__selections {
    color: var(--v-text-base);
}

// google autofill input background
#app.dark .v-input__control {
    input {
        -webkit-text-fill-color: var(--v-text-base) !important;
        &:-webkit-autofill{
            -webkit-text-fill-color: var(--v-text-base) !important;
            -webkit-box-shadow: 0 0 0 50px var(--v-gray-base) inset;
        }
    }

    .v-input__slot:hover input:not(:active):not(:focus) {
        -webkit-text-fill-color: var(--v-text-base) !important;
        &:-webkit-autofill {
            -webkit-text-fill-color: var(--v-text-base) !important;
            -webkit-box-shadow: 0 0 0 50px #4B4A4E inset;
        }
    }
}

// pagination
// pagination
#app.dark .theme--dark.v-pagination .v-pagination__item,
#app.dark .theme--dark.v-pagination .v-pagination__navigation {
    background: var(--v-foreground-base);
}

#app.dark .theme--dark.v-pagination .v-pagination__item--active {
    color: var(--v-textDark-base);
}

// v-card
#app.dark .theme--dark.v-card,
#app.dark .theme--dark.v-card > .v-card__subtitle, 
#app.dark .theme--dark.v-card > .v-card__text {
    color: var(--v-text-base);
    background: var(--v-foreground-base);
}

// v-stepper
#app.dark .theme--dark.v-stepper {
    background: var(--v-foreground-base);
}

// alert
#app.dark .v-alert.primary,
#app.dark .v-alert.success,
#app.dark .v-alert.error,
#app.dark .v-alert.warning {
    color: var(--v-textDark-base);
    
    i.v-icon {
        color: var(--v-textDark-base);
    }

    a, a:visited, a:active {
        color: var(--v-textDark-base);
    }
}

// table
#app.dark .theme--dark.v-data-table.v-data-table--fixed-header thead th,
#app.dark .theme--dark.v-data-table {
    background: var(--v-foreground-base);
    color: var(--v-text-base);
}

// v-menu
#app.dark .v-menu__content.theme--dark {
    border: 1px solid var(--v-customBorder-base) !important;
}

#app.dark button.v-btn.menu-button {
    background: var(--v-foreground-base) !important;
    color: var(--v-text-base) !important;
    
    span {
        color: var(--v-text-base) !important;
    }
}

// vocabulary page search bar
#app.dark #vocabulary #vocabulary-search-field {
    .v-input__slot fieldset,
    .v-input__slot {
        background: var(--v-gray-base);
        border-right: 0px solid rgba(0, 0, 0, 0) !important;

        &:focus, &:active, &:hover {
            background: var(--v-gray3-base);
        }
    }
}

// vocabulary page 
#app.dark #vocabulary {
    #search-result-info i,
    #search-result-info {
        color: var(--v-text-base) !important;
    }

    div.new-word,
    div.highlighted-word {
        color: var(--v-textDark-base);
    }
}

// vocabulary edit stage buttons
#app.dark #vocabulary-edit-stage-buttons {
    button.v-btn {
        &.v-btn--active{
            background-color: var(--v-primary-base);
        }

        &.v-btn--active .v-btn__content {
            color: var(--v-textDark-base);
        }
    }
}

// v-menu in vocabulary
#app.dark .v-menu__content .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    background-color: var(--v-foreground-base);
    color: var(--v-text-base);
}

#app.dark .v-menu__content .v-list-item.v-list-item--active {
    background-color: var(--v-primary-base) !important;
    color: var(--v-textDark-base) !important;
}

#app.dark .v-menu__content .v-list-item.v-list-item--active i {
    color: var(--v-textDark-base) !important;
}

// date picker
#app.dark .theme--dark.v-picker__body {
    background: var(--v-foreground-base);
}

#app.dark .theme--dark.v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) button:not(:hover):not(:focus) {
    color: var(--v-text-base);
}

#app.dark .v-date-picker-title {
    color: var(--v-textDark-base);
}

// v-list
#app.dark .theme--dark.v-list {
    background: var(--v-foreground-base);
}

// navigation text
#app.dark .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: var(--v-text-base);
}

// navigation bottom text
#app.dark .v-navigation-drawer .v-btn__content span {
    color: var(--v-text-base);
}

// tab bar
#app.dark .v-slide-group__wrapper {
    background-color: var(--v-foreground-base);
}

// navigation button
#app.dark .theme--dark.v-list-item--active:before, 
#app.dark .theme--dark.v-list-item--active:hover:before, 
#app.dark .theme--dark.v-list-item:focus:before {
    opacity: 0;
}

// bottom navbar color 
#app.dark .theme--dark.v-bottom-navigation .spacer{
    background-color: var(--v-foreground-base);
}

// v-icon
#app.dark .theme--dark.v-icon,
#app.dark .v-btn.icon > .v-btn__content .v-icon {
    color: var(--v-text-base);
}

// white button icon
#app.dark .v-btn .theme--dark.v-icon.white--text {
    color: var(--v-textDark-base) !important;
}

// error v-icon button
#app.dark .v-btn.error--text .theme--dark.v-icon {
    color: var(--v-error-base);
}

// success v-icon button
#app.dark .v-btn.success--text .theme--dark.v-icon {
    color: var(--v-success-base);
}

// button
#app.dark .v-btn.primary .v-btn__content i.v-icon,
#app.dark .v-btn.success .v-btn__content i.v-icon {
    color: var(--v-textDark-base);
}

//  button
#app.dark .theme--dark.v-btn.v-btn--has-bg {
    background-color: var(--v-foreground-base);
}

#app.dark .v-btn.primary .v-btn__content,
#app.dark .v-btn.error .v-btn__content,
#app.dark .v-btn.success .v-btn__content {
    color: var(--v-textDark-base);

    span, i {
        color: var(--v-textDark-base);
    }
}
// password change alert
#app.dark #password-change-alert {
    color: var(--v-text-base);

    .v-btn i {
        color: var(--v-textDark-base);
    }
}

// calendar
#app.dark .v-btn.calendar-button .v-btn__content {
    color: var(--v-text-base);

    span {
        color: var(--v-text-base);
    }
}

#app.dark #calendar-popup-date {
    color: var(--v-textDark-base);

    i.v-icon {
        color: var(--v-textDark-base);
    }
}

// v-btn plain
#app.dark .v-btn--plain .v-btn__content {
    color: var(--v-text-base);
}

// subheader
#app.dark .subheader{
    color: var(--v-text-base);
}

// border
#app.dark .border {
    border-color: #393939 !important;
}

// calendar text
#app.dark #calendar #calendar-months .calendar-month .calendar-month-days .calendar-day.full-achievement .calendar-day-text {
    color: var(--v-textDark-base);
}
// calendar border
#app.dark #calendar #calendar-months .calendar-month .calendar-month-days .calendar-day {
    border-color: #404040;
}

// navigation text
#app.dark #navigation-drawer a.navigation-button.v-list-item--active {
    color: var(--v-textDark-base) !important;

    i {
        color: var(--v-textDark-base) !important;
    }
}

// book list text color
#app.dark #books .info-table-value.highlighted-words,
#app.dark #books .info-table-value.new-words {
    color: var(--v-textDark-base) !important;
}

// chapter list text color
#app.dark .book-chapters .info-table-value.highlighted-words,
#app.dark .book-chapters .info-table-value.new-words {
    color: var(--v-textDark-base) !important;
}


// text reader finished
.finished-box {
    .finished-stage-level {
        color: var(--v-textDark-base);
    }
}

// text reader chapter list
#app.dark #text-reader-chapter-list {
    span.highlighted{
        color: var(--v-textDark-base);
    }

    span.new {
        color: var(--v-textDark-base);
    }
}

// text reader glossary
#app.dark #text-reader-chapter-list {
    span.highlighted{
        color: var(--v-textDark-base);
    }

    span.new {
        color: var(--v-textDark-base);
    }
}

#app.dark #text-reader-glossary .glossary-entry {
    &:nth-child(even) {
        background-color: var(--v-gray-base);
    }

    .stage {
        &[stage="-7"] {
            background-color: var(--v-highlightedWordLevel7-base);
            color: var(--v-textDark-base);
        }
        &[stage="-6"] {
            background-color: var(--v-highlightedWordLevel6-base);
            color: var(--v-textDark-base);
        }
        &[stage="-5"] {
            background-color: var(--v-highlightedWordLevel5-base);
            color: var(--v-textDark-base);
        }
        &[stage="-4"] {
            background-color: var(--v-highlightedWordLevel4-base);
            color: var(--v-textDark-base);
        }
        &[stage="-3"] {
            background-color: var(--v-highlightedWordLevel3-base);
            color: var(--v-textDark-base);
        }
        &[stage="-2"] {
            background-color: var(--v-highlightedWordLevel2-base);
            color: var(--v-textDark-base);
        }
        &[stage="-1"] {
            background-color: var(--v-highlightedWordLevel1-base);
            color: var(--v-textDark-base);
        }

        &[stage="2"] {
            background-color: var(--v-newWord-base);
            color: var(--v-textDark-base);
        }
    }
}

// vocab box active stage button
#app.dark #vocab-box #vocab-box-stage-buttons .v-btn.v-btn--active, 
#app.dark #vocab-side-box #vocab-box-stage-buttons .v-btn.v-btn--active,
#app.dark #vocabulary-bottom-sheet-stage-buttons .v-btn.v-btn--active {
    background-color: var(--v-primary-base) !important;
    border-color: var(--v-primary-base) !important;
    color: var(--v-textDark-base) !important;
    
    i {
        color: var(--v-textDark-base) !important;
    }

    &::before {
        display: none !important;
    }
}

// vocab box stage buttons border
#app.dark #vocab-box #vocab-box-stage-buttons .v-btn,
#app.dark #vocab-side-box #vocab-box-stage-buttons .v-btn,
#app.dark #vocabulary-bottom-sheet-stage-buttons .v-btn {
    background-color: var(--v-gray-base);
    
    color: var(--v-text-base) !important;
}

// search result color
#app.dark .search-result .search-result-definition:hover {
    color: var(--v-text-base);
    background-color: var(--v-gray2-base);

    i {
        color: var(--v-text-base) !important;
    }
}


#app.dark .search-result.disabled .search-result-definition:hover,
#app.dark .search-result.disabled .search-result-definition:hover {
    &:hover {
        background-color: var(--v-foreground-base);
        color: var(--v-text-base);
        cursor: default;
    }
}

// search bar result icon color transition
.search-result .search-result-definition i {
    transition: 0s;
}

// search bar result icon color
.search-result .search-result-definition:hover i {
    color: var(--v-textDark-base) !important;
}

// search result title color
.search-result .search-result-title {
    color: var(--v-text-base) !important;

    i {
        color: var(--v-textDark-base) !important;
    }
}

// text block
#app.dark .text-block-group {

    .subtitle-timestamp {
        color: var(--v-textDark-base);
    }
    
    #vocab-box .vocab-box-toolbar {
        background-color: var(--v-primary-base);
        
        i.v-icon {
            color: var(--v-textDark-base);
        }
    }
    
    #vocab-box {
        border: 2px solid var(--v-gray3-base);
        border-color: var(--v-gray3-base);
        box-shadow: none;
    }

    #vocab-box #vocab-box-kanji-box .kanji,
    #vocab-side-box #vocab-box-kanji-box .kanji {
        border: 1px solid var(--v-gray3-base);

        &:hover {
            background-color: var(--v-gray-base);
        }
    }

    #vocab-box:before {
        border-bottom-color: var(--v-gray3-base);
    }

    // subheader
    #vocab-box .vocab-box-subheader span {
        background-color: var(--v-gray3-base);
        color: var(--v-text-base);
        border-radius: 8px;
    }

    // vocab hover box border color
    #vocab-hover-box {
        border-color: rgb(130, 130, 130);
    
        &:before {
            border-bottom-color: rgb(130, 130, 130);
        }
    }

    // vocab box lemma arrow
    #vocab-box .expression i {
        color: var(--v-text-base);
    }

    // text highlighting
    .word {
        &[stage="-7"], &[stage="-6"], &[stage="-5"], 
        &[stage="-4"], &[stage="-3"], &[stage="-2"], 
        &[stage="-1"], &[stage="2"] {
            &:not(.phrase) {
                color: var(--v-textDark-base);
            }
        }

        &.highlighted, &:hover {
            background-color: var(--v-readerWordSelection-base);
            color: var(--v-highlightedWordText-base);
            border-color: var(--v-readerWordSelection-base) !important;
        }
    }
}

// review
#review-box {
    hr {
        background-color: var(--v-gray3-base);
    }

    #review-card {
        &.back-to-deck-animation #review-card-content,
        &.into-the-correct-deck-animation #review-card-content {
            #review-card-front,
            #review-card-back {
                color: var(--v-textDark-base) !important;
            }
        }

        &.draw-new-card-animation #review-card-content {
            #review-card-front,
            #review-card-back {
                color: var(--v-text-base) !important;
            }
        }
    }
}

// admin api settings
#app.dark #admin-api-settings {
    #deepl-api-card,
    #deepl-api-card > .v-card__text {
        background-color: var(--v-gray-base) !important;
    }
}

// kanji list
#app.dark #kanji-list {
    .kanji {
        &:not(.learned) {
            color: var(--v-gray2-base);
        }
    }
}

// admin dictionary settings
#app.dark #supported-dictionaries {
    .dictionary {
        border: 1px dashed var(--v-gray3-base);
    }
}

// kanji details
#app.dark #kanji #kanji-radicals {
    .kanji-radical {
        &:hover {
            background-color: var(--v-gray-base);
        }
    }
}

// color picker actions
#app.dark .color-picker-actions {
    background-color: var(--v-foreground-base);
}

// library import dialog
#app.dark #import-dialog .youtube-subtitle-source #selected-youtube-subtitle,
#app.dark #import-dialog .jellyfin-subtitle-source #selected-jellyfin-subtitle,
#app.dark #import-dialog #website-text {
    background-color: var(--v-gray-base);
}

// user manual
#user-manual {
    pre, pre * {
        color: var(--v-text-base);
    }
}
